<template>
  <div id="container" @scroll="onScroll">
    <div id="content" :style="{ height: list.length * 30 + 'px' }">
      <!-- 占位，将内容顶到应该在的位置 -->
      <div id="placeholder" :style="{ height: currentIndex * 30 + 'px' }"></div>
      <!-- 展示，通过 innerHTML 塞入内容 -->
      <!-- <div id="listView"> -->
      <div
        v-for="(item, index) in currentList"
        :key="item"
        style="height: 30px; background-color: black"
      >
        {{ item }}
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      // list: [],
      // currentList: [],
      // height: "",
      // placeholderHeight: "",
      currentIndex: 0,
    };
  },
  computed: {
    currentList() {
      return this.list.slice(this.currentIndex, this.currentIndex + 10);
    },
  },
  methods: {
    onScroll(e) {
      const scrollTop = e.target.scrollTop;
      // console.log(scrollTop);
      this.currentIndex = Math.trunc(scrollTop / 30);
      // this.currentList = this.list.slice(
      //   this.currentIndex,
      //   this.currentIndex + 10
      // );
      // console.log(this.currentList);
      // this.placeholderHeight = currentIndex * 30 + "px";
    },
  },
  created() {
    this.list = Array.from({ length: 1000 }, (_, i) => i + 1);
    // this.height = this.list.length * 30 + "px";
    // console.log(this.height);
    // 渲染页面
    // this.currentList = this.list.slice(0, 10);
  },
};
</script>

<style>
div {
  /* width: 500px; */
}
#content {
  /* height: v-bind(height); */
  overflow: hidden;
}
#container {
  height: 200px;
  width: 400px;
  overflow-y: auto;
}
#placeholder {
  /* height: v-bind(placeholderHeight); */
}
</style>
